<template>
	<view :class="currentTheme">
		<a-nabbar name="收益统计" />
		<mescroll-body  @init="mescrollInit"  @down="downCallback"  @up="upCallback">
			<view class="u-padding-32">
				<item-search placeholder="请输入剧本名" @change="downCallback" v-model="form.name"></item-search>
				<view class="u-margin-top-20 u-flex">
					<view class="u-flex-1 u-flex">
						<view class="u-flex-1">
							<select-item  v-model="form.startTimeStr" :border="false" mode="time" ref="startTime" @getSelect="getChange" />
						</view>
						<text class="u-padding-left-20 u-padding-right-20 u-font-30 text-order-666">至</text>
						<view class="u-flex-1">
							<select-item  v-model="form.endTimeStr" mode="time" :border="false"  ref="endTime"  @getSelect="getChange" />
						</view>
					</view>
				</view>
			</view>
			<view class=" u-padding-left-32 u-padding-right-32">
				<view  v-for="(item,index) in dataList" :key="index" class="u-margin-top-20" @click="goDetail(item.id)">
					<item-box  :padding="30">
						<view class="u-flex u-col-top">
							<item-image :img="item.image" width="180" height="180" radius="12"></item-image>
							<view class="u-flex-1 u-margin-left-28" style="line-height: 1;">
								<view class="u-margin-bottom-6 u-font-32  box-title text-bold">{{item.productName}}</view>
								<label-box label="完成时间" paddingTb="0" labelWidth="100" labelSize="24" lineHeight="50">
									<text class="u-font-24 text-order-time">{{item.finishTime | timeFormat}}</text>
								</label-box>
								<view class="u-flex u-row-between">
									<view>
										<label-box label="DM" labelWidth="50" paddingTb="0"  labelSize="24" lineHeight="50">
											<text class="u-font-24 text-order-time">{{item.dmName}}</text>
										</label-box>
									</view>
									<view>
										<label-box label="DM抽成" paddingTb="0" labelWidth="90" labelSize="24" lineHeight="50">
											<text class="u-font-24 text-order-time">{{item.proportion}}%</text>
										</label-box>
									</view>
								</view>
								<view class="u-flex u-row-between">
									<view>
										<label-box label="单价" labelWidth="50" paddingTb="0"  labelSize="24" lineHeight="50">
											<text class="u-font-24 text-order-time">{{item.price}}</text>
										</label-box>
									</view>
									<view>
										<label-box label="人数" paddingTb="0" labelWidth="90" labelSize="24" lineHeight="50">
											<text class="u-font-24 text-order-time">{{item.payNum}}</text>
										</label-box>
									</view>
								</view>
								<!-- <label-box label="单价" paddingTb="12" labelWidth="100" labelSize="24" lineHeight="24">
									<text class="u-font-24 text-order-time">{{item.price}}</text>
								</label-box>
								<label-box label="销量" paddingTb="12" labelWidth="100" labelSize="24" lineHeight="24">
									<text class="u-font-24 text-order-time">{{item.productNum || 0}}</text>
								</label-box> -->
								<view class="u-flex u-row-right u-margin-top-20">
									<view class="u-font-30 box-title text-bold u-margin-right-20">总计</view>
									<money :price="item.total" size="36"></money>
								</view>
							</view>
						</view>
					</item-box>
				</view>
			</view>
		</mescroll-body>
		<fixed-team>
			<view class="u-flex u-flex-1">
				<view class="u-flex-1 u-margin-right-20">
					<item-btn @click="income" :width="'100%'" height="88" v-if="!isDM">新增</item-btn>
				</view>
				<view class="u-flex u-flex-1 u-row-right">
					<text class="u-font-32 box-title text-bold">合计：</text>
					<money :price="sumPrice" color="#765CFE" size="40"></money>
				</view>
			</view>
		</fixed-team>
	</view>
</template>

<script>
	import upCallback from '@/mixins/upCallbackMixin.js'
	import itemSearch from '@/components/itemSearch/itemSearch.vue'
	import dayjs from 'dayjs';
	export default {
		mixins:[upCallback],
		components: {
			itemSearch
		},
		data() {
			return {
				dataList:[],
				apiModule:'shopApi',
				apiType:'incomeStatistics',
				value:'',
				form:{
					name:'',
					startTimeStr:'',
					endTimeStr:'',
					startTime:'',
					endTime:'',
				},
				timer:null,
				name:'getIncomeStatisticsPageByStore',
				sumPrice:0
			}
		},
		computed: {
			dmUid(){ //如果是店长或者dm 必定有值
				return this.loginForm.clerkRole&&this.loginForm.uid || ''
			},
			isDM(){
				return this.loginForm.clerkRole=="DM"
			}
		},
		onLoad() {
			this.form.creatorId = this.loginForm.uid;
			if(this.dmUid) this.form.dmUid = this.dmUid
		},
		methods: {
			dataListCallBack({sumPrice}){
				this.sumPrice = sumPrice
			},
			getconfirm(){
				if(this.timer){
					clearTimeout(this.timer);
					this.timer = null;
				}
				this.timer = setTimeout(this.setDown,300)
			},
			setDown(){
				this.downCallback()
			},
			getDetail(item) {
				this.$u.route({
					url:'/pagesA/want/detail',
					params:{
						...this.option,
						id:item.id
					}
				})
			},
			//获取选择的时间
			getChange(item){
				setTimeout(()=>{
					const startTimeref = this.$refs.startTime;
					const endTimeref = this.$refs.endTime;
					if(startTimeref.value && endTimeref.value){
						const startTime = startTimeref.value+" 00:00:00"
						const endTime = endTimeref.value+" 00:00:00";
						if(dayjs(startTime).unix()<dayjs(endTime).unix()){
							//开始时间大于结束时间则不调用
							this.form.startTime = startTime;
							this.form.endTime = endTime
							this.downCallback()
						}else{
							uni.showModal({
								showCancel:false,
								content:'结束时间小于开始时间，请重新设置',
								title:'温馨提示'
							})
						}
					}
				},10)
			},
			income(){
				this.$u.route({
					url:'/pagesA/storeIncomeStatistics/createIncome'
				})
			},
			goDetail(id){
				this.$u.route({
					url:'/pagesA/storeIncomeStatistics/incomeDetail',
					params:{id}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.fixed{
		&-btn{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 55;
			background: #161324;
			border-top: 1rpx solid #6F6D78;
			line-height: 138rpx;
			box-sizing: border-box;
			padding:0 42rpx;
		}
		&-empty{
			height: 200rpx;
		}
	}
	.price{
		font-size: 50rpx;
	}
	.cn-code{
		font-size: 65rpx;
	}
	.text-order-time{
		line-height: 50rpx;
	}
</style>
